$(document).bind('cbox_cleanup', function(){
    $('.modalBox').hide();
});

function crearJcrop (target, min) {
    var id = target.replace('item', '');
    if (JcropOption.actual) JcropOption.actual.destroy();
    $('#modal'+id).find('.modal-footer .botones').html('Arrastre el mouse sobre la imagen para recortarla.');
    $('#imagen'+id).Jcrop({
        onSelect:  actualizarCoord,
        aspectRatio: (JcropOption.ratio)?JcropOption.ratio:min
    }, function () {JcropOption.actual = this;})
    $('#modal'+id).show();
    $.colorbox({inline:true, href:'#modal'+id})
}

function cancelar (target) {
    JcropOption.actual.destroy();
    $.colorbox.close()
}

function actualizarCoord (c) {
    var padre = this.ui.holder.parent().parent();
    var target = padre.find('img').attr('id');
    var html = '<a href="javascript:cancelar(\''+target+'\');" class="btn btn-danger"><i class="icon-remove icon-white"></i> Cancelar</a> ';
    html += '<a href="javascript:crop(\''+target+'\');" class="btn btn-primary recortar"><i class="icon-retweet icon-white"></i> Recortar</a>';
    $('#coordenadas').find('.x').val(c.x);
    $('#coordenadas').find('.y').val(c.y);
    $('#coordenadas').find('.ancho').val(c.w);
    $('#coordenadas').find('.alto').val(c.h);
    padre.find('.modal-footer .botones').html(html);
}

function crop (target) {
    var id = target.replace('imagen', '');
    $.ajax({
        type:'POST',
        url:BASE_URL+'admin/php/cropers/'+JcropOption.croper,
        data: $('#coordenadas').serializeAnything(),
        success:function (data) {
            onCropComplete(id, data);
        }
    })
    $.colorbox.close()
}

function aleatorio(inferior,superior){ 
    numPosibilidades = superior - inferior 
    aleat = Math.random() * numPosibilidades 
    aleat = Math.floor(aleat) 
    return parseInt(inferior) + aleat 
}

function onCropComplete(id, data) {
    var alea = aleatorio(1, 99999), ancho, alto;
    if ( $('#thumbnail'+id).parent('.preview')) {
        ancho = $('#thumbnail'+id).width()
        alto = $('#thumbnail'+id).height()
    } else {
        ancho = $('#thumbnail'+id).parent().width()
        alto = $('#thumbnail'+id).parent().height()        
    }
    
    $('#thumbnail'+id).attr({src:data+'?a='+alea}).css({width:ancho, height:alto, top:0, left:0})
    if (JcropOption.actual) {JcropOption.actual.destroy();}
}